<template>
  <el-card class="dish-card" shadow="hover">
    <div class="dish-image-container">
      <el-image
          :src="dish.image?.url"
          class="dish-image"
          fit="cover"
          @click="handleClickDetail"
      >
        <template #error>
          <div class="image-error">
            <el-icon>
              <Picture/>
            </el-icon>
          </div>
        </template>
      </el-image>

      <!-- 标签 -->
      <div class="dish-tags">
        <el-tag v-if="dish.isHot === 1" size="small" type="danger">热销</el-tag>
        <el-tag v-if="dish.isNew === 1" size="small" style="margin-left: 5px" type="success">新品</el-tag>
      </div>

      <!-- 折扣标签 -->
      <div v-if="dish.discount < 1" class="discount-tag">
        {{ Math.floor(dish.discount * 10) }}折
      </div>
    </div>

    <div class="dish-content">
      <el-button class="dish-name" type="text" @click="handleClickDetail">{{ dish.name }}</el-button>

      <div class="dish-info">
        <div class="merchant-info">
          <el-icon>
            <Shop/>
          </el-icon>
          <el-text line-clamp="1">{{ dish.merchantName }}</el-text>
        </div>

        <div class="rating-sales">
          <div class="rating">
            <el-rate
                v-model="dish.rating"
                disabled
                score-template="{value}"
                show-score
                size="small"
                text-color="#ff9900"
            />
          </div>
          <div class="sales">库存 {{ dish.stock }}</div>
          <div class="sales">已售 {{ dish.sales }}</div>
        </div>
      </div>

      <div class="dish-footer">
        <div class="price-info">
          <span class="current-price">¥{{ (dish.price * dish.discount).toFixed(2) }}</span>
          <span v-if="dish.discount < 1" class="original-price">¥{{ dish.price.toFixed(2) }}</span>
        </div>

        <div class="action-buttons" @click.stop>
          <el-button
              :icon="dish.collect ? 'StarFilled' : 'Star'"
              :type="dish.collect ? 'warning' : 'default'"
              circle
              size="small"
              @click="handleAddToFavorite"
          />
          <el-button
              :disabled="dish.stock <= 0"
              size="small"
              type="primary"
              @click="handleAddToCart"
          >
            <el-icon>
              <ShoppingCart/>
            </el-icon>
            {{ dish.stock > 0 ? '加入购物车' : '已售完' }}
          </el-button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import {Picture, Shop, ShoppingCart} from '@element-plus/icons-vue'
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const props = defineProps({
  dish: {
    type: Object,
    required: true
  }
})

// 添加到购物车
const handleAddToCart = async () => {
  await request.post('/cart', {businessType: 1, businessId: props.dish.id, count: 1})
  ElMessage.success('已添加到购物车')
}

// 添加到收藏
const handleAddToFavorite = async () => {
  props.dish.collect = !props.dish.collect
  const msg = await request.post('/collect', {businessType: 1, businessId: props.dish.id})
  ElMessage.success(String(msg))
}

// 点击详情
const router = useRouter()
const handleClickDetail = () => {
  router.push({
    path: '/userHome/dishDetail',
    query: {id: props.dish.id}
  })
}
</script>

<style scoped>
.dish-card {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.dish-card:hover {
  transform: translateY(-2px);
}

.dish-image-container {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.dish-image {
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.dish-tags {
  position: absolute;
  top: 8px;
  left: 8px;
}

.discount-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ff4757;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.dish-content {
  padding: 5px;
}

.dish-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dish-info {
  margin-bottom: 5px;
}

.merchant-info {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: orangered;
  margin-bottom: 8px;
}

.merchant-info .el-icon {
  margin-right: 4px;
}

.rating-sales {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rating :deep(.el-rate) {
  height: auto;
}

.sales {
  font-weight: bold;
  font-size: 12px;
}

.dish-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-price {
  font-size: 18px;
  font-weight: 600;
  color: #ff4757;
}

.original-price {
  font-size: 14px;
  color: #909399;
  text-decoration: line-through;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}
</style>
